<template>
  <view>
    <u-overlay :show="show">
      <view class="warp">
        <view class="rect1" @click="ontap1">
          <div class="box1">
            <img src="../../static/tabbar/szp.png" alt="" />
          </div>
          <div class="rectxt">晒作品</div>
        </view>
        <view class="rect2" @click="ontap2">
          <div class="box1">
            <img src="../../static/tabbar/xbj.png" alt="" />
          </div>
          <div class="rectxt">写笔记</div>
        </view>
        <view class="rect3" @click="ontap3">
          <div class="box1">
            <img src="../../static/tabbar/cgz.png" alt="" />
          </div>
          <div class="rectxt">草稿箱</div>
        </view>
        <view class="rect4" @click="show = false">
          <img src="../../static/tabbar/gb.png" alt="" />
        </view>
      </view>
    </u-overlay>
  </view>
</template>

<script>
export default {
  data() {
    return {
      show: false,
    };
  },
  created() {
    uni.$on("page", (data) => {
      this.show = data.show;
    });
  },
  methods: {
    ontap1(){
      // console.log(111);
			 uni.navigateTo({
					//保留当前页面，跳转到应用内的某个页面
				url: '/pages/release/works'
			})
    },
    ontap2(){
      // console.log(222);
			uni.navigateTo({
					//保留当前页面，跳转到应用内的某个页面
				url: '/pages/release/note'
			})
    },
    ontap3(){
      // console.log(333);
			uni.navigateTo({
					//保留当前页面，跳转到应用内的某个页面
				url: '/pages/release/drafts'
			})
    }
  }
  
};
</script>
<style scoped>
.warp {
  height: 100%;
  position: relative;
}


.box1 {
  width: 45px;
  height: 45px;
  margin: 0 auto;
  background-color: #fff;
  border-radius: 100%;
}
.box1 img {
  margin: 12.5px;
  width: 20px;
  height: 20px;
}
.rectxt {
  color: white;
  font-size: 14px;
  text-align: center;
}
.rect1 {
  width: 60px;
  height: 60px;
  position: absolute;
  bottom: 10%;
  left: 50%;
	margin-left: -120px;
}
.rect2 {
  width: 60px;
  height: 60px;
  position: absolute;
  bottom: 16%;
  left: 50%;
	margin-left: -30px;
}
.rect3 {
  width: 60px;
  height: 60px;
  position: absolute;
  bottom: 10%;
  left: 50%;
	margin-left: 60px;
}
.rect4 {
  width: 50px;
  height: 50px;
  position: absolute;
  bottom: 0%;
  left: 50%;
	margin-left: -25px;
}
.rect4 img {
  width: 100%;
  height: 100%;
}
</style>
